<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2022/12/29
  Time: 11:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%String path = request.getContextPath()+"/";%>
<!doctype html>
<html>
<head>
    <title>Title</title>
    <base href="<%=path%>">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/jquery-treegrid@0.3.0/css/jquery.treegrid.css" rel="stylesheet">
    <link href="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.css" rel="stylesheet">
    <link rel="stylesheet" href="static/ztree/css/zTreeStyle/zTreeStyle.css">
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

    <script src="https://cdn.jsdelivr.net/npm/jquery-treegrid@0.3.0/js/jquery.treegrid.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.21.2/dist/extensions/treegrid/bootstrap-table-treegrid.min.js"></script>
</head>
<style>
.query{
    height: 54px;
    border-radius: 6px;
    padding: 10px 10px;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
}
</style>
<body>
<div class="container-fluid">
   <div class="row" >
       <div class="col-xs-12" style="background-color: #f3f3f4;padding:0px 0px;">
           <div style="height:800px;margin: 15px 15px;background-color: #f3f3f4">
               <div class="row" style="padding: 0px 15px 15px 15px;">
                   <div class="col-xs-12 query" style="background-color: #ffffff">
                       <form class="form-inline" id="queryForm">
                           <div class="form-group">
                               <label >菜单名称</label>

                               <input type="text" name="resourceName" class="form-control"  placeholder="登录名">
                           </div>
                           <div class="form-group">
                               <label >菜单状态</label>
                                <select class="form-control">
                                    <option value="-1">所有</option>
                                    <option value="0">启用</option>
                                    <option value="1">禁用</option>
                                </select>
                           </div>
                           <button type="button" class="btn btn-primary " onclick="$.table.search();"><span class="glyphicon glyphicon-search"></span>搜索</button>

                           <button type="button" class="btn btn-success" onclick="$.table.reset();"><span class="glyphicon glyphicon-refresh"></span>重置</button>
                       </form>
                   </div>
               </div>
               <div class="row" style="padding: 0px 15px;">
                   <div class="col-xs-12" style="background-color: #ffffff;padding-top:10px; ">
                       <table id="table"></table>
                       <div id="toolbar">
                           <button type="button" class="btn btn-primary btn-xs" onclick="$.modal.openWin('新增角色信息','role/toAdd');"><span class="glyphicon glyphicon-plus"></span>新增</button>
                           <button type="button" class="btn btn-primary btn-xs" onclick="edit2();"><span class="glyphicon glyphicon-edit" ></span>编辑</button>
                           <button type="button" class="btn btn-primary btn-xs" onclick="expandAlls();"><span class="glyphicon glyphicon-transfer"></span>展开/折叠</button>

                       </div>
                   </div>

               </div>
           </div>
       </div>
   </div>
</div>
</body>
<script src="static/js/layer/layer.js"></script>
<script src="static/ztree/js/jquery.ztree.core.js"></script>
<script src="static/js/sofwin.js"></script>
<script>
    var $table = $('#table')
    var i=0;
    function expandAlls(){
        if(i==0){
            $table.treegrid('collapseAll');
            i=1;
        }else {
            $table.treegrid('expandAll');
            i=0;
        }

    }
    $(function() {
        $table.bootstrapTable({
            url: 'resource/data', // 服务端的请求，返回json数组
            idField: 'id',// id属性对应的列的名称
            showColumns: true,
            method: 'post',
            contentType:'application/x-www-form-urlencoded',
            toolbar:$("#toolbar"),
            columns: [
                {
                    field: 'id',
                    radio: true
                },
                {
                    field: 'name',
                    title: '资源名称'
                },
                {
                    field: 'sort',
                    title: '排序'
                },
                {
                    field: 'url',
                    title: '请求地址'
                },
                {
                    field: 'type',
                    title: '类型',
                    formatter: function(value,row,index,field){
                        if(value==0){
                            return '<span class="label label-primary">目录</span>';
                        }
                        return '<span class="label label-default">菜单</span>';
                    }
                },
                {
                    field: 'status',
                    title: '状态'
                },
                {
                    field: 'permission',
                    title: '权限标识'
                },{
                    title: '操作',
                    width: 200,
                    align: 'center',
                    formatter:function(value,row,index,field){
                        return '<button type="button" class="btn btn-primary btn-xs" onclick="edit('+row.id+');"><span class="glyphicon glyphicon-edit" ></span>编辑</button>'+
                            '&nbsp;&nbsp;<button type="button" class="btn btn-primary btn-xs" onclick="$.operator.delete(\'role/delete/'+row.id+'\')"><span class="glyphicon glyphicon-trash" ></span>删除</button>';
                    }
                }
            ],
            responseHandler:function(res){
                return res.result;
            },
            treeShowField: 'name', // 树形结构需要在哪一列显示
            parentIdField: 'parentId',// json数组简单数据
                                  // 层级关系不适用children数组组，采用的是parentId
                                  // 简单数据中父级的列表
            onPostBody: function() {
                // 根据上述的设置重新绘制表格树
                    $table.treegrid({
                        treeColumn: 1, // 显示层级菜单是在第1列
                        onChange: function() {
                            $table.bootstrapTable('resetView')
                        }
                    })
            }
        })
    })

</script>
</html>
